<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            resize: none;
            outline: none;
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <textarea name="" id="message" cols="30" rows="10"></textarea><button>提交</button>
    <div></div>
    <script>
        // 替换 replace
        // var str = 'andy和red';
        // var newStr = str.replace('andy', 'baby');
        // var newStr = str.replace(/andy/,'baby');
        // console.log(newStr);
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            // div.innerHTML = text.value.replace(/激情/, '**');
            // replace()方法只能替换一次
            // 我们可以利用正则表达式中的修饰符(switch)
            // g : 全局匹配;   i : 忽略大小写
            // gi : 全局匹配+忽略大小写
            div.innerHTML = text.value.replace(/激情/g, '**');
        }
    </script>
</body>

</html>